<!--
 * @Author: jiu yin
 * @Date: 2024-04-11 10:50:32
 * @LastEditTime: 2024-04-29 12:09:23
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pagesA\ar_navigation\components\clockModal.vue
 * jiu
-->
<template>

   <uni-popup ref="popup_clockModal" class="z-999" @maskClick="store_close">
      <view class="clock_Modal_title_bg w-540rpx h-762rpx ">
         <view class="text-#3D3D3D font-size-34rpx font-700 text-center pt-262rpx">恭喜你，打卡成功</view>
         <view class="text-#666666 font-size-28rpx text-center mt-20rpx">{{ clockModal.title }}</view>
         <button
            class="but_bg2 absolute left-32rpx bottom-50rpx h-80rpx border-rd-40rpx text-size-30rpx text-#fff font-700 mt-24rpx mb-20rpx"
            @click="clock">与景点合影</button>
         <image src="https://resources.ym2meta.com/web-smart-tour/close.png"
            class="absolute left-50% bottom--104rpx translate-x--50% w-72rpx h-72rpx" @click="store_close"></image>
      </view>

   </uni-popup>

</template>

<script>
import { navigateTo, navigateBack } from "@/hooks"

export default {
   data() {
      return {
         navigateTo,
      }
   },
   onLoad(options) {

   },
   computed: {
      clockModal() {
         return this.$store.getters.clockModal;
      },
   },
   watch: {
      clockModal(newVal, oldVal) {
		
         if (newVal == oldVal) return
		 console.log("-==-------------------------===",newVal)
		 
		 if(newVal.show){
			 this.open();
			 // setTimeout(this.close(),3000 ); 
			 let that = this;
			 setTimeout(function(){
				  that.$store.commit("map/set_clockModal", { show: false})
			 },10000)
		 }else{
			 this.close();
		 }
		 
         // newVal?.show ? this.open() : this.close();
      }
   },
   mounted() {

   },
   methods: {
      open() {
         this.$refs.popup_clockModal.open('center')
      },
      close() {
         this.$refs.popup_clockModal.close()
      },
      store_close() {
         this.$store.commit("map/set_clockModal", { show: false})
      },
      clock() {
         this.store_close()
		 console.log('@@@@@@@@@@@@@@@',this.clockModal);
		 const points_id = this.clockModal.id; //24
		 const spot_id = this.clockModal.spot_id; //9
		 
		 this.navigateTo(`/pagesB/photo/photo_step_1?points_id=${points_id}&spot_id=${spot_id}`);
      }
   }
}
</script>


<style lang="scss">
.clock_Modal_title_bg {
   position: relative;
   background: url("https://resources.ym2meta.com/web-smart-tour/clock_bg.png") no-repeat top left;
   background-size: 100% 100%;

   .but_bg2 {
      width: 476rpx;
      background: linear-gradient(90deg, #0FBCD6 0%, #0CCA91 100%);
   }
}
</style>
